<template>
  <div class="s-interaction">
    <div class="left-content">
      <div class="menu">
        <p>
          <dsfimg :src="leftTopImg" :errorSrc="config.setting_img" />
        </p>
        <ul>
          <li :class="{ act: active == index }" @click="changeMenu(index)" v-for="(d, index) in state.menulist" :key="d.name">
            {{ d.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="right-content">
      <div class="title">
        <dsfimg :src="rightTopImg" :errorSrc="config.setting_img" />
      </div>
      <div class="item-content">
        <Component :is="currentCom" />

        <!-- <InteractionList /> -->
        <!-- <InteractionConsult /> -->
        <!-- <InteractionDemand /> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import InteractionList from "./InteractionList.vue";
import InteractionConsult from "./InteractionConsult.vue";
import InteractionDemand from "./InteractionDemand.vue";

import { ref, reactive, markRaw, inject } from "vue";
const config = inject("config");
import leftTopImg from "@/assets/imgs/pc/hdjl.png";
import rightTopImg from "@/assets/imgs/pc/renwu.png";

let active = ref(0);
let state = reactive({
  menulist: [
    { name: "互动交流", Com: markRaw(InteractionList) },
    { name: "咨询建议", Com: markRaw(InteractionConsult) },
    { name: "数据需求", Com: markRaw(InteractionDemand) },
  ],
});

const currentCom = ref(state.menulist[0].Com);

const changeMenu = index => {
  active.value = index;
  currentCom.value = state.menulist[index].Com;
};
</script>
